<template>
    <div class="home">

        <!--<div style="font-size: xx-large;font-weight: bolder;color: red;text-align: center">！！！致广大文友：因不🉑抗力原因，客服微信号:ctbsc2021暂停使用半个月。有紧急需要的，可加新客服微信号:xywenhui2025</div>-->

        <div class="kekebigbox keke_doc_clearfix">

            <!--轮播图区域-->
            <RollPicture :classifies="homeData.classifies" :total="homeData.total"></RollPicture>
            <!--轮播图下的分类（目录）-->
            <Classification></Classification>

            <!--原来横亘在中间的四个分类-->
            <!--<PictureAdvertisement></PictureAdvertisement>-->
        </div>

        <!--word板块-->
        <WordPart :all-today-records="homeData.allTodayRecords"
                  :limit-today-records="homeData.limitTodayRecords"
                  :top-records="homeData.topRecords"
                  :today-count="homeData.todayCount"
        ></WordPart>


        <div class="kekebigbox keke_doc_clearfix"></div>

        <!--ppt板块-->
        <PPTPart :ppt-records="homeData.pptRecords"></PPTPart>

        <div class="kekebigbox keke_doc_clearfix"></div>

        <!--工具-->
        <Tools></Tools>
    </div>
</template>

<script>
import {mapGetters, mapMutations} from "vuex";
import Tools from "@/components/Tools.vue";
import PPTPart from "@/components/PPTPart.vue";
import Classification from "@/components/Classification.vue";
import PictureAdvertisement from "@/components/PictureAdvertisement.vue";
import WordPart from "@/components/WordPart.vue";
import RollPicture from "@/components/RollPicture.vue";

export default {
    name: "HomeView",
    components: {
        Tools,
        WordPart,
        PPTPart,
        Classification,
        PictureAdvertisement,
        RollPicture,
    },
    data() {
        return {
            host: process.env.VUE_APP_API_HOST,
        };
    },
    computed: {
        //homeData获取的是首页固定的数据，一般只获取一次即可 eg:热词，topRecords，分类  这样的数据
        ...mapGetters(["homeData"]),
    },

    methods: {
        ...mapMutations('user', ['SetHomeDataRecords'])
    },
    mounted: function () {
        this.$nextTick(() => {
            jQuery(".slideBox").slide({
                mainCell: ".bd ul",
                autoPlay: true
            });
            jQuery('.navTitleBox,.popup').hover(function () {
                jQuery(this).addClass('navTitleBoxbg').parent().addClass('navTitleBoxbg').find('.popup').show();
            }, function () {
                jQuery(this).removeClass('navTitleBoxbg').parent().removeClass('navTitleBoxbg').find('.popup').hide()
            });
            jQuery('.newleft h2').on("click", function () {

                var index = jQuery(this).index();
                jQuery(this).addClass('active').siblings().removeClass('active');
                var l = 0;
                if (index === 2) {
                    l = 90;
                }
                jQuery('.active-line').attr('style', 'transform: translateX(' + parseInt(l) + 'px); width: 80px;');
                jQuery('.newleft .bd').hide();
                jQuery('.newleft .bd' + index).show();
            });
        });
    }
};
</script>
<style>


.ad-box {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
}

.ad-box ul {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.ad-box ul li {
    width: 23%;
    cursor: pointer;
}

.search_bar button {
    width: 90px;
    background: #3b8efa !important;
}

.mod_list li {
    line-height: 35px;
    float: left;
    width: 33.3%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mod_list li span {
    float: right;
    color: #999;
    margin: 0 20px
}

.mod_list li a {
    font-size: 14px;
    color: #000;
    white-space: nowrap;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis
}

.mod_list .myfont {
    font-size: 16px;
    margin-right: 7px
}
</style>
